<template>
	<view >
		<view class="recycling-deviceinfo-content">
			<view class="content-header  maxW">
				<view class="progress-bar">
					<view class="progress-vernier" :style="`width:${width}%`">
						{{itemIndex}}/{{total}}
					</view>

				</view>
				<view class="product-info">
					{{name}}
				</view>
			</view>
			<view class="question-list-box">
				<view class="question-list">
					<template v-if="chooseList.length!==0">
						<block v-for="(item,index) in chooseList" :key="index">
							<view class="question-item">
								<view class="title">
									<view class="left">
										<view class="category-name">
											{{item.name}}
										</view>
									</view>
									<view class="right">
										<view class="value text-ellipsis">
											{{item.value}}
										</view>
										<view class="edit">
											修改
										</view>
									</view>
								</view>
							</view>

						</block>
					</template>
					<block v-for="(item,index) in singleList" :key="index">
						<template v-if="itemIndex==index">
							<view class="question-item">
								<view class="title">
									<view class="left">
										<view class="category-name">
											{{item.name}}
										</view>
									</view>
									<view class="right">

									</view>
								</view>
								<view class="option-list">
									<view class="option-item" v-for="(child,childIndex) in item.values"
										:class="child.un_recycle?'unSelect':''" @click="changeIndex(child,index,item)"
										:key="childIndex">
										<view class="desc">
											<text>{{child.name}}</text>
										</view>
									</view>
								</view>
							</view>
						</template>

					</block>
					<template v-if="itemIndex==total">
						<view class="question-item">
							<view class="title">
								<view class="left">
									<view class="category-name">
										其他问题（可多选）
									</view>
								</view>
								<view class="right">
									<view class="value">

									</view>
								</view>
							</view>
							<view class="option-list">
								<view class="option-item" v-for="(item,index) in multiList"
									:class="{unSelect:item.un_recycle,selected:multiIdList.includes(item.id)}"
									@click="getMultiItem(item,index)">
									<view class="desc">
										<text>{{item.name}}</text>
									</view>
								</view>
							</view>
						</view>
					</template>
				</view>
			</view>
			<view class="submit maxW maxF" @click="showToast">
				<view class="submit-text">
					隐私无忧，免费赠送国家AC标准级隐私清除
				</view>
				<view class="btn-s">
					马上估价
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				itemIndex: 0,
				width: 0,
				name: '',
				singleList: [],
				chooseList: [],
				multiList: [],
				multiIdList: [],
				provider: '',
				defaultList:[]
			};
		},
		computed: {
			total() {
				return this.singleList.length
			}
		},
		methods: {
			showToast() {
				let list = []
				this.chooseList.forEach(item => {
					list.push(item.id)
				})
				list = list.concat(this.multiIdList)
				let params = {
					type: 'default',
					title: '默认主题',
					message: "请先选择设备情况",
				}
				if (list.length < this.total) {
					this.$refs.uToast.show({
						...params,
					})
				} else {
					let that = this
					uni.navigateTo({
						url: `/secPage/enquiryInfo/enquiryInfo?productId=${that.productId}&provider=${that.provider}`,
						success() {
							that.$store.commit('SET_ID_LIST', list)
						}
					})
				}

			},
			getMultiItem(item,i) {
				let index = this.multiIdList.indexOf(item.id)
				if (index == -1) {
					this.$set(this.multiIdList,i,item.id)
				} else {
					this.$set(this.multiIdList,index,this.defaultList[index])
				}
			},
			changeIndex(child, index, item) {
				if (child.un_recycle) return;
				let obj = {
					index: index,
					name: item.name,
					value: child.name,
					id: child.id
				}
				this.width = ((index + 1) / this.total) * 100
				this.chooseList.push(obj)
				this.itemIndex = index + 1
			},
			getPriceProperty(product_id) {
				this.$request.get('/getPriceProperty', {
					product_id: product_id
				}).then((res) => {
					this.singleList = res.data.data.single
					this.multiList = res.data.data.multi
					this.provider = res.data.data.provider
					this.productId = res.data.data.productId
					this.multiList.forEach(item=>{
						this.multiIdList.push(item.preferredId)
					})
					this.defaultList = [...this.multiIdList]
				}).catch(e => {
					console.log('错误了:', e)
				})
			}
		},
		onLoad(e) {
			this.getPriceProperty(e.id)
			this.name = e.name
		}
	}
</script>

<style lang="scss" scoped>
	view {
		line-height: 1.15;
		font-size: .22rem;
	}

	.recycling-deviceinfo-content {
		background: #fff;
		color: #3c3c3c;

		.content-header {
			position: fixed;
			z-index: 99;
			top: 50px;
			left: 0;
			right: 0;
			border-bottom: 1px solid #e5e5e5;

			.progress-bar {
				background: #f7f7f7;

				.progress-vernier {
					min-width: 12.5%;
					line-height: .32rem;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					box-sizing: border-box;
					font-size: .2rem;
					color: #fff;
					text-align: right;
					padding: 0 0.16rem;
					background: #ff6900;
					transition: width 1s;
					border-radius: 0 0.15rem 0.15rem 0;
				}
			}

			.product-info {
				background: #fff;
				line-height: 1rem;
				padding: 0 0.2rem;
				font-size: .32rem;
			}
		}

		.question-list-box {
			max-height: 90vh;
			overflow-y: auto;
			padding-top: 2.5rem;
			padding-bottom: 1.9rem;
			position: relative;

			.question-list {


				.question-item {
					box-sizing: border-box;
					padding: 0 0.2rem;
					background: #fff;

					&:first-child {
						margin-top: 0;
					}

					.title {
						margin: 0;
						font-size: .32rem;
						font-weight: 700;
						padding: 0.38rem 0;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.left {
							display: flex;
							align-items: center;
							flex: 1;

							.category-name {
								font-size: .32rem;
								font-weight: 700;
							}
						}

						.right {
							display: flex;
							max-width: 65%;
							justify-content: flex-end;

							.value {
								font-size: .28rem;
								font-weight: 400;
								color: rgba(0, 0, 0, .5);
								flex: 1;
								text-align: right;
							}

							.edit {
								color: #ff6900;
								margin-left: 0.18rem;
								display: flex;
								align-items: center;
								font-size: .28rem;
								font-weight: 400;
							}
						}
					}

					.option-list {
						padding: 0.16rem 0;
						margin-top: -0.24rem;

						.unSelect {
							opacity: 0.6;
						}



						.option-item {
							position: relative;
							width: 100%;
							border: 1px solid #f7f7f7;
							background: #f7f7f7;
							box-sizing: border-box;
							padding: 0 0.2rem;
							font-size: .24rem;
							margin-bottom: 0.24rem;
							border-radius: 0.18rem;
							text-align: center;

							.desc {
								font-size: .28rem;
								line-height: 1.2;
								padding: 0.32rem 0;
								display: flex;
								justify-content: center;
								align-items: center;

								text {
									max-width: 5.5rem;
									word-break: break-all;
									text-overflow: ellipsis;
									overflow: hidden;
									display: -webkit-box;
									-webkit-line-clamp: 2;
									-webkit-box-orient: vertical;
								}
							}
						}

						.selected {
							border: 1px solid #ff6900;
							background: #fff0e5;
						}
					}
				}
			}
		}

		.submit {
			position: fixed;
			bottom: 0;
			left: 0;
			padding: 0.3rem 0.25rem;
			background: #fff;

			.submit-text {
				color: rgba(0, 0, 0, .3);
				margin: 0 auto;
				text-align: center;


			}

			.btn-s {
				background-color: #ff6900;
				color: #fff;
				font-size: .32rem;
				width: 6.7rem;
				height: 0.96rem;
				line-height: .96rem;
				text-align: center;
				border-radius: 0.5rem;
				margin-top: 0.3rem
			}
		}
	}
</style>